/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("switch") {
    $titon-switch-class-bar: generate-class-name($titon-switch, "bar");
    $titon-switch-class-toggle: generate-class-name($titon-switch, "toggle");

    #{generate-class-name($titon-switch)} {
        @extend %placeholder-inline-block;
        width: 7rem;
        cursor: pointer;

        input {
            display: none;
        }
    }

    #{$titon-switch-class-bar} {
        display: block;
        position: relative;
        font-size: theme-setting("medium-font-size");
        transition: background map-get($titon-switch, "transition");
        text-align: #{bidi-alignment()};
        background: theme-setting("bg-light");

        &::before,
        &::after {
            position: absolute;
            padding: theme-setting("medium-padding");
            top: 0;
            opacity: 1;
            z-index: 1;
            transition: opacity map-get($titon-switch, "transition");
        }

        &::before {
            #{bidi-alignment()}: 0;
            opacity: 0;
            content: attr(data-switch-on);
        }

        &::after {
            #{bidi-opposite-alignment()}: 0;
            content: attr(data-switch-off);
        }
    }

    #{$titon-switch-class-toggle} {
        @extend %placeholder-inline-block;
        padding: theme-setting("medium-padding");
        width: 50%;
        z-index: 2;
        #{bidi-alignment()}: 0;
        user-select: none;
        transition: #{bidi-alignment()} map-get($titon-switch, "transition");
        background: #fff;

        &::before {
            content: "\00A0"; // NBSP
        }
    }

    //-------------------- States --------------------//

    @include switch-state(checked) {
        #{$titon-switch-class-toggle} {
            #{bidi-alignment()}: 50%;
        }

        &::before {
            opacity: 1;
        }

        &::after {
            opacity: 0;
        }
    }

    //-------------------- Modifiers --------------------//

    @if (is-feature-enabled("all-modifiers") or index(map-get($titon-switch, "modifiers"), "stacked")) {
        #{generate-class-name($titon-switch, "", "stacked")} {
            #{$titon-switch-class-bar} {
                &::before,
                &::after {
                    z-index: 3;
                    opacity: 1 !important;
                }
            }
        }
    }
}
